<template>
    <view class="container" :style="{ display: visible ? 'block' : 'none' }">
        <header-bar v-show="tabIndex == 0" :config="config" @rightClick="addOrderClick"></header-bar>
        <header-bar-return v-show="tabIndex == 1" :config="config1" @rightClick="addReturnClick"></header-bar-return>
        <search-bar ref="orderSearch" v-show="tabIndex == 0" :placeholderText="placeholderText" @searchFn="searchFn"
            :actions="actions" @actionFn="filterOpen">
        </search-bar>
        <return-search-bar ref="returnSearch" v-show="tabIndex == 1" :placeholderText="placeholderText1"
            @searchFn="searchFn" :actions="actions" @actionFn="filterOpen">
        </return-search-bar>
        <tab-bar :tabs="tabs" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar>
        <view class="main">
            <swiper v-if="loadOk" class="swiper" :style="{ height: listHeight }" :current="tabIndex"
                @change="swiperChange">
                <swiper-item>
                    <order-list ref="orderList" :height="listHeight"></order-list>
                </swiper-item>
                <swiper-item>
                    <order-return-list ref="returnList" :height="listHeight"></order-return-list>
                </swiper-item>
            </swiper>
        </view>
        <uni-drawer :width="320" ref="showRight" mode="right" :mask-click="true" class="drawer">
            <view class="drawer-view" v-if="tabIndex == 0">
                <scroll-view class="drawer-scroll" scroll-y="true">
                    <view class="filter-item date-item">
                        <text class="label">创建日期</text>
                        <view class="date-select">
                            <text class="date-input" :class="filterData.startTime == '' ? 'data-time-ccc' : ''"
                                @click="openStarDate">{{ filterData.startTime == "" ? "请选择时间" : filterData.startTime
                                }}</text>
                            <text class="to">至</text>
                            <text class="date-input" :class="filterData.endTime == '' ? 'data-time-ccc' : ''"
                                @click="openEndDate">{{ filterData.endTime == "" ? "请选择时间" : filterData.endTime
                                }}</text>
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">订单状态</text>
                        <view class="tags">
                            <text class="tag-item" v-for="(item, index) in orderState"
                                :class="{ selected: item.checked }" @click="changeState(index)">{{ item.Value }}</text>
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">付款状态</text>
                        <view class="tags">
                            <text class="tag-item" :class="{ selected: payState == 0 }"
                                @click="changePayState(0)">未付款</text>
                            <text class="tag-item" :class="{ selected: payState == 1 }"
                                @click="changePayState(1)">已付款</text>
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">下单方式</text>
                        <view class="tags">
                            <text class="tag-item" :class="{ selected: valetType == 0 }"
                                @click="changeValetTye(0)">自主下单</text>
                            <text class="tag-item" :class="{ selected: valetType == 1 }"
                                @click="changeValetTye(1)">代客下单</text>
                        </view>
                    </view>
                    <view class="filter-item select-item touch" v-if="false">
                        <text class="label">默认发货仓库</text>
                        <text class="value">{{ filterData.warehouse ? filterData.warehouse : "全部仓库" }}</text>
                        <uni-icons type="arrowright"></uni-icons>
                    </view>
                </scroll-view>
                <view class="drawer-bottom-bar">
                    <button class="btn btn-reset" @click="resetFn">
                        <text>重置</text>
                    </button>
                    <button class="btn btn-set" @click="setFn">
                        <text>确定</text>
                    </button>
                </view>
            </view>
            <view class="drawer-view" v-if="tabIndex == 1">
                <scroll-view class="drawer-scroll" scroll-y="true">
                    <view class="filter-item date-item">
                        <text class="label">创建日期</text>
                        <view class="date-select">
                            <text class="date-input" :class="filterReturnData.startTime == '' ? 'data-time-ccc' : ''"
                                @click="openStarDateReturn">{{
                                    filterReturnData.startTime == "" ? "请选择时间" : filterReturnData.startTime
                                }}</text>
                            <text class="to">至</text>
                            <text class="date-input" :class="filterReturnData.endTime == '' ? 'data-time-ccc' : ''"
                                @click="openEndDateReturn">{{ filterReturnData.endTime == "" ? "请选择时间" :
                                filterReturnData.endTime }}</text>
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">退货状态</text>
                        <view class="tags">
                            <text class="tag-item" v-for="(item, index) in returnState"
                                :class="{ selected: item.checked }" @click="changeReturnState(index)">{{ item.Value
                                }}</text>
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">退单方式</text>
                        <view class="tags">
                            <text class="tag-item" :class="{ selected: optType == 0 }"
                                @click="changeOptType(0)">自主退单</text>
                            <text class="tag-item" :class="{ selected: optType == 1 }"
                                @click="changeOptType(1)">代客退单</text>
                        </view>
                    </view>
                </scroll-view>
                <view class="drawer-bottom-bar">
                    <button class="btn btn-reset" @click="resetReturnFn">
                        <text>重置</text>
                    </button>
                    <button class="btn btn-set" @click="setReturnFn">
                        <text>确定</text>
                    </button>
                </view>
            </view>
        </uni-drawer>
        <uni-calendar :date="filterData.startDate" ref="startDate" :insert="false" @confirm="confirmStarDate">
        </uni-calendar>
        <uni-calendar :date="filterData.endDate" :startDate="filterData.startTime" ref="endDate" :insert="false"
            @confirm="confirmEndDate"></uni-calendar>
        <uni-calendar :date="filterReturnData.startDate" ref="startDateReturn" :insert="false"
            @confirm="confirmStarDateReturn">
        </uni-calendar>
        <uni-calendar :date="filterReturnData.endDate" ref="endDateReturn" :insert="false"
            :startDate="filterReturnData.startTime" @confirm="confirmEndDateReturn"></uni-calendar>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import { GetOrderStateSelects } from "@/service/api/order.js"
import tabBar from "@/components/common/tab-bar.vue"
import searchBar from "@/components/common/search-bar.vue"
import headerBarReturn from "@/components/common/header-bar.vue"
import returnSearchBar from "@/components/common/search-bar.vue"
import orderList from "@/components/order/order-list.vue"
import orderReturnList from "@/components/order/order-return-list.vue"
import { GetRefundOrderStateSelects } from "@/service/api/exChange.js"
export default {
    components: {
        tabBar,
        searchBar,
        returnSearchBar,
        orderList,
        orderReturnList,
        headerBarReturn,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        visible: {
            handler(newVal) {
                if (this.visible) {
                    if (this.$refs.orderList) {
                        this.$refs.orderList.refresh()
                    }
                    if (this.$refs.returnList) {
                        this.$refs.returnList.refresh()
                    }
                }
                this.$nextTick(() => { })
            },
            immediate: true,
        },
        //监听更新
        getUpOrderView(e) {
            if (this.tabIndex == 0 && this.$refs.orderList) {
                this.$refs.orderList.refresh()
            }
            if (this.tabIndex == 1 && this.$refs.returnList) {
                this.$refs.returnList.refresh()
            }
        },
    },
    data() {
        return {
            placeholderText: "请输入订单编号/客户名称",
            placeholderText1: "请输入退货单编号/客户名称",
            config: {
                title: "订单",
                back: false,
                centerSlot: true,
                rightSlot: true,
                color: ["#ffffff"],
                statusBarFontColor: "#ffffff",
                rightBtns: [
                    {
                        id: 1,
                        btnType: 1,
                        type: "代下单",
                    },
                ],
            },
            config1: {
                title: "订单",
                back: false,
                centerSlot: true,
                color: ["#ffffff"],
                statusBarFontColor: "#ffffff",
                rightSlot: true,
                rightBtns: [
                    {
                        id: 1,
                        btnType: 1,
                        type: "代退货",
                    },
                ],
            },
            listHeight: "",
            loadOk: false,
            actions: [
                {
                    type: "icon-shaixuan",
                    id: 1,
                },
            ],
            tabIndex: 0,
            tabs: [
                {
                    title: "订货单",
                },
                {
                    title: "退货单",
                },
            ],
            filterData: {
                searchKey: "",
                orderState: "",
                startTime: "",
                endTime: "",
                valetType: -1,
                payState: -1,
            },
            filterReturnData: {
                searchKey: "",
                states: "",
                startTime: "",
                endTime: "",
                optType: -1,
            },
            orderState: [],
            returnState: [],
            payState: -1,
            valetType: -1,
            optType: -1,
            refresh: false,
        }
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.config.backgroundColor = [1, mainColor]
        this.config1.backgroundColor = [1, mainColor]
    },
    mounted() {
        this.getListHeight()
        this.getOrderStateSelects()
        this.getRefundOrderStateSelects()
    },
    onShow() { },
    methods: {
        getOrderStateSelects() {
            GetOrderStateSelects().then((res) => {
                if (res.State == 1) {
                    this.orderState = res.Data
                }
            })
        },
        getRefundOrderStateSelects() {
            GetRefundOrderStateSelects().then((res) => {
                if (res.State == 1) {
                    this.returnState = res.Data
                }
            })
        },
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                //#ifdef H5
                this.listHeight = e - 200 + "px"
                //#endif
                //#ifdef APP
                this.listHeight = e - 230 + "px"
                //#endif
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                clearTimeout(this.timer)
                this.timer = setTimeout((time) => {
                    this.tabIndex = index
                }, 20)
            }
        },
        searchFn(key) {
            this.filterData.searchKey = key
            console.log(this.filterData.searchKey)
            if (this.tabIndex == 0) {
                this.$refs.orderList.refresh(this.filterData)
            } else {
                this.$refs.returnList.refresh(this.filterData)
            }
        },
        openStarDate() {
            //打开选择开始日期
            this.$refs.startDate.open()
        },
        confirmStarDate(e) {
            //选择开始日期
            this.filterData.startTime = e.fulldate;
            this.filterData.endTime = ""
        },
        openEndDate() {
            //打开选择结束日期
            this.$refs.endDate.open()
        },
        confirmEndDate(e) {
            //选择结束日期
            this.filterData.endTime = e.fulldate
        },
        openStarDateReturn() {
            //打开选择开始日期
            this.$refs.startDateReturn.open()
        },
        confirmStarDateReturn(e) {
            //选择开始日期
            this.filterReturnData.startTime = e.fulldate
            this.filterReturnData.endTime = ""
        },
        openEndDateReturn() {
            //打开选择结束日期
            this.$refs.endDateReturn.open()
        },
        confirmEndDateReturn(e) {
            //选择结束日期
            this.filterReturnData.endTime = e.fulldate
        },
        filterOpen() {
            this.$refs.showRight.open()
        },
        filterClose() {
            this.$refs.showRight.close()
        },
        //重置
        cancelFilterState() {
            this.orderState.forEach((e) => {
                e.checked = false
            })
            this.$forceUpdate()
        },
        //重置
        cancelFilterReturnState() {
            this.returnState.forEach((e) => {
                e.checked = false
            })
            this.$forceUpdate()
        },
        //
        changeState(index) {
            this.orderState[index].checked = !this.orderState[index].checked
            this.$forceUpdate()
        },
        changeReturnState(index) {
            this.returnState[index].checked = !this.returnState[index].checked
            this.$forceUpdate()
        },
        filterStateFn() {
            let ids = []
            this.orderState.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Key)
                }
            })
            this.filterData.orderState = ids.join(",")
        },
        filterReturnStateFn() {
            let ids = []
            this.returnState.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Key)
                }
            })
            this.filterReturnData.states = ids.join(",")
        },
        setFn() {
            this.filterData.valetType = this.valetType
            this.filterData.payState = this.payState
            this.filterStateFn()
            console.log(this.filterData)
            this.$refs.orderList.refresh(this.filterData)

            this.filterClose()
        },
        resetFn() {
            this.filterData.startTime = ""
            this.filterData.endTime = ""
            this.valetType = -1
            this.payState = -1
            this.cancelFilterState()
            this.setFn()
        },
        setReturnFn() {
            this.filterReturnData.optType = this.optType
            this.filterReturnStateFn()
            console.log(this.filterReturnData)
            this.$refs.returnList.refresh(this.filterReturnData)

            this.filterClose()
        },
        resetReturnFn() {
            this.filterReturnData.startTime = ""
            this.filterReturnData.endTime = ""
            this.optType = -1
            this.cancelFilterReturnState()
            this.setReturnFn()
        },
        changeOptType(type) {
            if (this.optType == type) {
                this.optType = -1
            } else {
                this.optType = type
            }
            console.log(this.optType)
        },
        changeValetTye(type) {
            if (this.valetType == type) {
                this.valetType = -1
            } else {
                this.valetType = type
            }
            console.log(this.valetType)
        },
        changePayState(type) {
            if (this.payState == type) {
                this.payState = -1
            } else {
                this.payState = type
            }
            console.log(this.payState)
        },
        addReturnClick(e) {
            if (e.id == 1) {
                //代退货
                this.easyGoTo("/pages/select/select-customer?selectType=1")
            }
        },
        addOrderClick(e) {
            if (e.id == 1) {
                //代下单
                this.easyGoTo("/pages/select/select-customer?selectType=2")
            }
        },
    },
}
</script>

<style lang="scss">
.date-select {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100rpx;

    .date-input {
        flex: 1;
        display: flex;
        justify-content: center;
        border-bottom: solid 1rpx $border;
        padding-bottom: 16rpx;
    }

    .to {
        margin: 0 20rpx;
    }
}

.drawer {
    z-index: 100 !important;
}

.search-box {
    height: 96rpx;
}
</style>
